<template>
  <!-- 歌单页面的导航头部 -->
  <div class="nav_head">
    <div class="left">
      <span style="font-size: 24px; color: #444; font-weight: 700">{{
        cat
      }}</span>
      <span class="category_box">
        <span
          class="explain"
          @click="handleChoice"
          :style="{ '--opacity': opacity ? 1 : 0 }"
          >选择分类</span
        >
        <Categorys
          :isHide="isHide"
          @handle-category="handleCategory"
        ></Categorys>
      </span>
    </div>
    <div class="right">
      <div class="type">热门</div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import Categorys from "./Categorys.vue";
export default defineComponent({
  name: "NavHead",
  components: {
    Categorys,
  },
  setup(props, context) {
    let opacity = ref(false); // 控制类名为explain的伪元素的显示与隐藏
    let isHide = ref(false); // 控制子组件Categorys的显示与隐藏
    let cat = ref("全部");

    // 点击了类名为explain的元素的事件
    let handleChoice = () => {
      opacity.value = !opacity.value;
      isHide.value = !isHide.value;
    };

    // 处理子组件的分类歌单的点击回调
    let handleCategory = (category) => {
      context.emit("handleCategory", category);
      cat.value = category;
      handleChoice();
    };

    return {
      opacity,
      isHide,
      cat,
      handleChoice,
      handleCategory,
    };
  },
});
</script>
<style scoped>
.nav_head {
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 2px solid #c20c0c;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.type {
  padding: 10px;
  background-color: #a80909;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}
.category_box {
  position: relative;
}
.explain {
  margin-left: 20px;
  padding: 10px 15px;
  background-color: #0c73c2;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}
.explain::after {
  content: " ";

  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #0c73c2;

  position: absolute;
  left: 30px;
  bottom: -15px;
  z-index: 999;

  opacity: var(--opacity);

  transition: all 0.3s;
}
</style>
